<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器——表单选择器</title>
    <script type="application/javascript" src="../../jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        body {font-size:12px;text-align: center;}
        div{border: solid 1px #ccc ; background-color: #eee;padding: 5px}
        textarea, select, button, input, span{display: none;}
        .red{color: red;}
    </style>
</head>
<body>
    <form id="form1" style="width: 241px" action="">
        <textarea rows="" cols="">TextArea</textarea>
        <select><option value="0">Item 0</option></select>
        <input type="text" name="name" value="text" />
        <input type="password" value="1234" />
        <input type="radio" value="1" />
        <input type="checkbox" value="1" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
        <input type="image" src="Images/01.gif" title="image" />
        <input type="button" value="按钮" />
        <input type="file" value="文件域" />
        <span id="sp">Span</span>
        <div id="divShow"></div>
    </form>
    <input type="button" value="按钮2" />
    <input type="text" value="4321" />
</body>
<script type="application/javascript">
    $(function () {
        $("#divShow").html("表单共找出Input类型元素"+ $("#form1 :input").length + "个");
        $('input[name="name"]').css('display','block');
        $("#form1 select").show(1000);
        $("#form1 :submit").show(1000);
        $("#form1>input[type='button']").css('display','block');
        $("input[type='text']").show(1000);
        $("#sp").css('display','block').addClass('red');
        $("#form1 select option:selected").text();
    });
</script>
</html>